import 'package:flutter/material.dart' ;
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:mfkb/pages/school/around/AroundHouse.dart';
import 'package:mfkb/pages/school/around/AroundJob.dart';
import 'package:mfkb/pages/school/around/AroundMarket.dart';
import 'package:mfkb/service/SchoolService.dart';

class AroundPage extends StatefulWidget {
  @override
  _AroundPageState createState() => _AroundPageState();
}

class _AroundPageState extends State<AroundPage> {

  dynamic _control = [true , false , false] ;

  dynamic _position = {"x":0.0 , "_x":0.0 , "y":0.0 , "_y":0.0} ;
  int _currentIndex = 0 ;
  dynamic _data = {"market":{"pages":1 , "list":[] , "mPage":1} , "job":{"pages":1 , "list":[] , "mPage":1} , "house":{"pages":1 , "list":[] , "mPage":1} }  ;
  List<Widget> _pages = [Container() , Container() , Container()] ;

  bool direction = true ;

  @override
  void initState() {
    _pages[0] = AroundMarket(_data["market"]) ;
    _pages[1] = AroundJob(_data["job"]) ;
    _pages[2] = AroundHouse(_data["house"]) ;
    setState(() {
      
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark ,
      child: Scaffold(
        body: Container(
          color: Color.fromARGB(255, 246 , 245, 248) ,
          child: Column(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).padding.top ,
              ) ,
              Container(
                height: ScreenUtil().setHeight(45),
                child: Row(
                  children: <Widget>[
                    Container(
                      width: ScreenUtil().setWidth(35),
                      child: GestureDetector(
                        child: Container(
                          width: ScreenUtil().setWidth(17),
                          height: ScreenUtil().setWidth(17),
                          margin: EdgeInsets.only(left:ScreenUtil().setWidth(15)),
                          child: Image.asset("assets/images/back.png" , fit: BoxFit.fill,),
                        ),
                        onTap: (){
                          Navigator.of(context).pop() ;
                        },
                      )
                    ) ,
                    Expanded(
                      child: Center(
                        child: Text(
                          "校园周边" , style: TextStyle(
                            fontSize: ScreenUtil().setSp(18) ,
                            fontFamily: "PingFang-SC-Bold,PingFang-SC" ,
                            fontWeight: FontWeight.bold ,
                            color: Color.fromARGB(255, 19, 28, 53)
                          ),
                        ),
                      ),
                    ) ,
                    Container(
                      width: ScreenUtil().setWidth(35),
                    )
                  ],
                ),
              ) ,
              Container(
                height: ScreenUtil().setHeight(46) ,
                margin: EdgeInsets.only(left:ScreenUtil().setWidth(27) , right:ScreenUtil().setWidth(27)),
                child: Row(
                  children: <Widget>[
                    titleItem("周边店铺" , 0) ,
                    Container(
                      width: ScreenUtil().setWidth(1),
                      height: ScreenUtil().setHeight(17),
                      color: Color.fromARGB(255, 205, 207, 221) ,
                    ) ,
                    titleItem("兼职家教" , 1) ,
                    Container(
                      width: ScreenUtil().setWidth(1),
                      height: ScreenUtil().setHeight(17),
                      color: Color.fromARGB(255, 205, 207, 221) ,
                    ) ,
                    titleItem("租房信息" , 2) ,
                  ],
                ),
              ) ,
              Container(
                height: ScreenUtil().setHeight(3) ,
                margin: EdgeInsets.only(left:ScreenUtil().setWidth(27) , right:ScreenUtil().setWidth(27) , top:ScreenUtil().setHeight(0)),
                child: Row(
                  children: <Widget>[
                    titleBottomItem(0) ,
                    Container(
                      width: ScreenUtil().setWidth(1),
                      height: ScreenUtil().setHeight(17),
                    ) ,
                    titleBottomItem(1) ,
                    Container(
                      width: ScreenUtil().setWidth(1),
                      height: ScreenUtil().setHeight(17),
                      color: Color.fromARGB(255, 205, 207, 221) ,
                    ) ,
                    titleBottomItem(2) ,
                  ],
                ),
              ) ,
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(top:ScreenUtil().setHeight(7)),
                  child: GestureDetector(
                    child: AnimatedSwitcher(
                      duration: const Duration(milliseconds: 70),
                      transitionBuilder: (Widget child, Animation<double> animation) {
                        //执行缩放动画
                        //FadeTransition
                        var tween=Tween<Offset>(begin: Offset(1, 0), end: Offset(0, 0)) ;
                        return MySlideTransition(child: child, position: tween.animate(animation) , direction: direction,);
                      },
                      child: _pages[_currentIndex],
                    ) ,
                    onHorizontalDragStart: (event){
                      _position["x"] = event.localPosition.dx ;
                      _position["y"] = event.localPosition.dy ;
                      _position["_x"] = event.localPosition.dx ;
                      _position["_y"] = event.localPosition.dy ;
                    },
                    onHorizontalDragUpdate: (event){
                      _position["_x"] = event.localPosition.dx ;
                      _position["_y"] = event.localPosition.dy ;
                    },
                    onHorizontalDragEnd: (e){
                      if((_position["_y"] - _position["y"]).abs() > (_position["_x"] - _position["x"]).abs()) return ;
                      if((_position["_x"] - _position["x"]).abs() > 0.05*ScreenUtil().setWidth(375)){
                        var index ;
                        for(var i = 0 ; i < _control.length ; i++){
                          if(_control[i]) index = i ;
                        }
                        if(_position["_x"] - _position["x"] < 0){ 
                          if(index == 2){
                            return ;
                          }
                          for(var i = 0 ; i < _control.length ; i++){
                            _control[i] = false ;
                          }
                          _control[index+1] = true ;
                          setState(() {
                            direction = true ;
                            _currentIndex = index + 1 ;
                          });
                        } else{
                          if(index == 0){
                            return ;
                          }
                          for(var i = 0 ; i < _control.length ; i++){
                            _control[i] = false ;
                          }
                          _control[index-1] = true ;
                          setState(() {
                            direction = false ;
                            _currentIndex = index - 1  ;
                          });
                        }
                      }
                      _position["x"] = 0.0 ;
                      _position["y"] = 0.0 ;
                      _position["_x"] = 0.0 ;
                      _position["_y"] = 0.0 ;
                    },
                  ) 
                ),
              )
            ],
          ),
        ),
      ),
    );
  } 

  titleItem(String name , int index){
    return GestureDetector(
      child:Container(
        width: ScreenUtil().setWidth(106),
        color: Color.fromARGB(255, 246, 245, 248),
        child: Center(
          child: Text(name , style: TextStyle(
            fontSize: _control[index] ? ScreenUtil().setSp(16) : ScreenUtil().setSp(14) ,
            fontFamily: "PingFang-SC-Bold,PingFang-SC" ,
            fontWeight: _control[index] ? FontWeight.bold : FontWeight.w500 ,
            color: _control[index] ? Color.fromARGB(255, 19, 28, 53) : Color.fromARGB(255, 78, 86, 108)
          ),),
        ),
      ) ,
      onTap: (){
        var index1 = 0 ;
        for(var i = 0 ; i < _control.length ; i++){
          if(_control[i]) index1 = i ;
          _control[i] = false ;
        }
        setState(() {
          if(index > index1){
            direction = true ;
          }else{
            direction = false ;
          }
          _control[index] = true ;
          _currentIndex = index ;
        });
      },
    ) ;
  }

  titleBottomItem(int index){
    return GestureDetector(
      child:Container(
        width: ScreenUtil().setWidth(106),
        color: Color.fromARGB(255, 246, 245, 248),
        child: Center(
          child: Container(
            width: ScreenUtil().setWidth(24),
            color: _control[index] ? Color.fromARGB(255, 0, 195, 206) : Color.fromARGB(255, 246, 245, 248),
          )
        ),
      ) ,
      onTap: (){
        var index1 = 0 ;
        for(var i = 0 ; i < _control.length ; i++){
          if(_control[i]) index1 = i ;
          _control[i] = false ;
        }
        setState(() {
          if(index > index1){
            direction = true ;
          }else{
            direction = false ;
          }
          _currentIndex = index ;
          _control[index] = true ;
        });
      },
    ) ;
  }
}


class MySlideTransition extends AnimatedWidget {
  MySlideTransition({
    Key key,
    @required Animation<Offset> position,
    this.transformHitTests = true,
    this.child,
    this.direction
  })
      : assert(position != null),
        super(key: key, listenable: position) ;

  Animation<Offset> get position => listenable;
  final bool transformHitTests;
  final Widget child ;
  final bool direction ;

  @override
  Widget build(BuildContext context) {
    Offset offset=position.value;
    //动画反向执行时，调整x偏移，实现“从左边滑出隐藏”
    if (position.status == AnimationStatus.reverse) {
      if(direction){
        offset = Offset(-offset.dx, offset.dy);
      }else{
        offset = Offset(offset.dx, offset.dy);
      }
    }else if(position.status == AnimationStatus.forward){
      if(direction){
        offset = Offset(offset.dx, offset.dy);
      }else{
        offset = Offset(-offset.dx, offset.dy);
      }
    }
    return FractionalTranslation(
      translation: offset ,
      transformHitTests: transformHitTests,
      child: child,
    );
  }
}